<template>
  <div>
    <a-spin :spinning="isLoading || isLoadingOther">
      <a-form :model="editForm" name="edit-form" :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }"
        autocomplete="off">
        <a-form-item label="角色名" name="name" :rules="[{ required: true, message: '请输入角色名' }]">
          <a-input v-model:value="editForm.name" placeholder="请输入角色名" />
        </a-form-item>
        <a-form-item label="权限" name="roletext" :rules="[{ required: false, message: '请输入角色名' }]">
          <a-tree v-model:checkedKeys="checkedKeys" v-model:checkStrictly="checkStrictly" defaultExpandAll checkable
            v-if="adminMeuList.length" :tree-data="adminMeuList" :field-names="fieldNames" @check="treeCheckChange">
          </a-tree>
        </a-form-item>
        <a-form-item :wrapper-col="{ offset: 4, span: 16 }">
          <a-button type="primary" html-type="submit" @click="editPost">立即提交</a-button>
          <a-button @click="editCancel" style="margin-left:10px;">取消</a-button>
        </a-form-item>
      </a-form>
    </a-spin>
  </div>
</template>

<script setup>
import { ref, onMounted, inject } from 'vue';
import { message } from 'ant-design-vue';
import { editAdminRoles, getAdminMenuListOk, getAdminRolesDetail } from "@/api/admin";   //引入api
import { useRouter, useRoute } from 'vue-router';

// const checkedKeys = ref({ checked: ['0-1-2', '0-2-1', '0-2-2'], halfChecked: ['0-1', '0-2'] });
const checkedKeys = ref([]);
const checkStrictly = ref(false);
const fieldNames = {
  key: 'id',
};

const router = useRouter();
const route = useRoute();

const isLoading = ref(false);    // 控制loading
const isLoadingOther = ref(false);    // 控制loading

const editForm = ref({});  // 编辑表单

const id = ref(route.query.id);  // 参数id
//根据参数id获取数据
const getUrlId = () => {
  const { checkURLParamsId } = inject('checkURLParamsId');  // 依赖注入--验证参数id正确性
  if (checkURLParamsId(id)) {
    isLoading.value = true;
    getAdminRolesDetail({ id: id.value, return_level3: 1 }).then((res) => {
      isLoading.value = false;
      if (res === false) return;

      editForm.value.id = res.data.id;
      editForm.value.name = res.data.name;
      checkedKeys.value = res.data.roletext.split(',').map(Number); // 字符串转数组，字符串转数字

    }).catch((rej) => {
      isLoading.value = false;
      message.error('获取数据失败：' + rej);
      editCancel();
    });
  }
}

// 获取接口数据列表
const editPost = () => {
  isLoading.value = true;

  editForm.value.roletextVueIds = checkedKeys.value;  // 数组转字符串
  editAdminRoles(editForm.value).then((res) => {
    if (res === false) return;

    message.success('操作成功，即将跳转……');
    setTimeout(() => { editCancel() }, 1000);
  }).catch((rej) => {
    isLoading.value = false;
    message.error('失败：' + rej);
  });
};

// 跳转到列表页
const editCancel = () => {
  isLoading.value = false;
  router.replace('/admin/admin_roles/index');
}

const adminMeuList = ref([]); // 菜单列表
// 获取菜单列表
const getAdminMenuList = () => {
  isLoadingOther.value = true;
  getAdminMenuListOk({}).then((res) => {
    isLoadingOther.value = false;
    if (res === false) return;

    adminMeuList.value = res.data;  //菜单列表
  });
};

// 页面加载完成后，获取数据列表
onMounted(() => {
  getUrlId();
  getAdminMenuList();
})
</script>

<style scoped></style>